<template>
    <div class="login-main" :style="{ height: screenHeight }">
        <div class="login-content">
            <img src="../assets/img/admin_login_logo.png" alt="">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="mobile">
                    <el-input v-model="ruleForm.mobile" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" placeholder="请输入密码" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script>
import { login } from '@/api/login';
export default {
    name: "login",
    data() {
        return {
            screenHeight: document.documentElement.clientHeight + 'px',
            ruleForm: {
                mobile: '15190088570',
                password: '123456',
            },
            rules: {
                mobile: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    login(this.ruleForm).then(res => {
                        localStorage.setItem("token", res.data.token);
                        localStorage.setItem("adminInfo", JSON.stringify(res.data.admin_info));
                        this.$store.commit('initMenuData', res.data.menu);
                        this.$store.commit('initSiteThemeData', res.data.site_theme);
                        this.$router.push({ name: "main" });
                    })
                } else {
                    //表单数据为空，不请求
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
  
<style lang="less" scoped>
.login-main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -moz-user-select: none;
    /*火狐*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    -ms-user-select: none;
    /*IE10*/
    -khtml-user-select: none;
    /*早期浏览器*/

    background-color: #22B14C;
    background-image: url("../assets/img/bg2.jpg");

    .login-content {
        width: 450px;
        height: auto;
        padding: 15px;
        border: 1px solid #C0C4CC;
        border-radius: 5px;
    }

}
</style>